<template>
  <div class="common-layout">
    <el-container>
      <el-header>用户：{{ name }}</el-header>
      <el-container>
        <el-aside width="200px">

          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">expand</el-radio-button>
            <el-radio-button :value="true">collapse</el-radio-button>
          </el-radio-group>
          <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" :router="true"
            @close="handleClose">
            <el-sub-menu :index="item.id" v-for="(item,index) in leftMenu" :key="index">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>{{ item.name }}</span>
              </template>
      
                <el-menu-item :index="leftchildren.id" v-for="(leftchildren,index) in item.children" :key="index" :route="{path:leftchildren.path}">{{ leftchildren.name }}</el-menu-item>
            
            </el-sub-menu>

          </el-menu>

        </el-aside>
        <el-main>
           <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs';

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const leftMenu = localStorage.getItem('leftMenu') ? JSON.parse(localStorage.getItem('leftMenu')) : []

console.log('leftMenu',leftMenu);

const name=localStorage.getItem('username') ? JSON.parse(localStorage.getItem('username')) : []


</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>